<template>
	<view :style="{ height: height }" class="flex justify-center align-center bg-white padding">
		<view :class="customStyle" @click="handleClickItem">
			<view class="text-center">
				<text v-if="props.icon.length > 0" :class="props.icon" class="size-84 text-gray"></text>
				<image v-else style="width: 200px;" mode="widthFix" src="/static/images/order/default_img_order.png">
				</image>
			</view>
			<view class="text-size-30 text-center margin-top-xs margin-bottom">
				{{ setting.token.length > 0 ? props.content : '暂未登录' }}</view>
			<view v-if="setting.token.length == 0" class="padding-xs flex flex-direction">
				<button class="cu-btn round  bg-menu text-white text-size-32">立即登录</button>
			</view>
			<view v-else-if="buttonStr.length > 0" class="padding-xs flex flex-direction">
				<button class="cu-btn round  bg-menu text-white text-size-32">{{ buttonStr }}</button>
			</view>
		</view>
		<!-- 登录popup -->
		<login-popup :value="visible" @change="handleLogin"></login-popup>

	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import loginPopup from '@/components/login-popup.vue';
	import { useSettingStore } from '@/stores/index';
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const visible = ref(false);
	const props = defineProps({
		content: {
			type: String,
			default: '敬请期待'
		},
		icon: {
			type: String,
			default: ''
		},
		buttonStr: {
			type: String,
			default: ''
		},
		customStyle: {
			type: String,
			default: ''
		},
		height: {
			type: String,
			default: '400rpx'
		}
	});
	const handleLogin = () => {
		visible.value = false;
		emit('action', true);
	};
	const handleClickItem = (e : any) => {
		if (setting.token.length > 0) {
			emit('action', e);
		} else {
			visible.value = true;
			// uni.navigateTo({
			// 	url: '/views/login/phonelogin'
			// });
		}
	};
</script>

<style scoped>
	.cu-bar {
		min-height: 30px;
	}
</style>